<template>
    <div class="section-header text-center">
        <h2>Join the biggest <br>
            Community of learning</h2>
        <p class="style2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam, quis malesuada sed
            tristique sed
            vulputate eleifend urna potenti. Amet non sed eget</p>
    </div>
    <div class="community__wrapper">
        <div class="community__map">
            <div class="community__map-inner">
                <div class="community__reviews" data-aos="fade-up" data-aos-duration="1000" :data-aos-offset="screenHeight/5.3" data-aos-delay="50">
                    <p> <i class="fa-solid fa-heart"></i> Happy Strudents</p>
                    <div class="community__reviews-content">
                        <ul>
                            <li><img src="/images/community/avator/1.png" alt="user image"></li>
                            <li><img src="/images/community/avator/2.png" alt="user image"></li>
                            <li><img src="/images/community/avator/3.png" alt="user image"></li>
                            <li><img src="/images/community/avator/4.png" alt="user image"></li>
                            <li><img src="/images/community/avator/5.png" alt="user image"></li>
                        </ul>
                        <p class="count mb-0">+<Counter parentQuerySelector=".community__reviews-content" end="25" />K
                        </p>

                    </div>
                </div>
                <img src="/images/community/1.png" alt="community image" data-aos="fade-up" data-aos-duration="800">
                <nuxt-link to="/signup" class="trk-btn trk-btn--rounded trk-btn--secondary1">Join Now</nuxt-link>
            </div>
        </div>
    </div>
</template>


<script>
import Counter from "@/components/base/Counter.vue";
export default {
    components: { Counter },
    props: {
        learningImg: {
            type: Array,
            default: () => [],
        },
    },
  computed: {
        screenHeight() {
            return screen.height 
        }
    },
}
</script>